<template>
	<div>
		<div class="nav-bar">
			<van-nav-bar title="商品详情"
									 left-text="返回"
									 left-arrow
									 fixed
									 z-index="9"
									 @click-left="onClickLeft"></van-nav-bar>
		</div>
		<div class="head-image">
			<img :src="goodInfo.IMAGE1"
					 width="100%">
		</div>
		<div class="good-name">{{ goodInfo.NAME }}</div>
		<div class="good-price">价格：{{ goodInfo.PRESENT_PRICE | moneyFilter }}</div>
		<div class="tab">
			<van-tabs swipeable
								color="#e61382"
								title-active-color="#e61382"
								sticky
								offset-top="2.2rem">
				<van-tab title="商品详情">
					<div class="detail"
							 v-html="goodInfo.DETAIL">还没做</div>
				</van-tab>
				<van-tab title="评价">还没做</van-tab>
			</van-tabs>
		</div>
		<div class="bottom">
			<div>
				<van-button size="large"
										type="warning"
										@click="addToCart">加入购物车</van-button>
			</div>
			<div>
				<van-button size="large"
										type="danger">直接购买</van-button>
			</div>
		</div>
	</div>
</template>

<script>
import { toMoney } from '@/filter'

import url from '@/serviceAPI.config.js'

export default {
	name: 'Good',
	data() {
		return {
			goodId: '',
			goodInfo: {}
		}
	},
	methods: {
		getGoodInfo() {
			this.$axios({
				url: url.getGoodInfo,
				method: 'post',
				data: {
					goodId: this.goodId
				}
			})
				.then(value => {
					if (value.data.code === 200 && value.data.message) {
						this.goodInfo = value.data.message
					} else {
						this.$toast.fail('服务器错误，获取商品信息失败！')
					}
					// console.log(this.goodInfo)
				})
				.catch(error => {
					console.log(error)
				})
		},
		onClickLeft() {
			this.$router.go(-1)
		},
		addToCart() {
			const goodsInCart = this.$store.state.goodsInCart,
				isAdded = goodsInCart.find(good => good.goodId === this.goodId)

			if (isAdded) {
				this.$toast.success('该商品已在购物车中！')
			} else {
				const goodInfo = {
					goodId: this.goodInfo.ID,
					name: this.goodInfo.NAME,
					price: this.goodInfo.PRESENT_PRICE,
					image: this.goodInfo.IMAGE1,
					count: 1
				}

				this.$store.commit('addToCart', goodInfo)
			}

			this.$router.push({ name: 'Cart' })
		}
	},
	created() {
		this.goodId = this.$route.query.goodId
			? this.$route.query.goodId
			: this.$route.params.goodId
		// console.log(this.goodId)
		this.getGoodInfo()
	},
	filters: {
		moneyFilter(money) {
			return toMoney(money)
		}
	}
}
</script>

<style lang="scss" scoped>
.nav-bar {
	::v-deep .van-nav-bar__content {
		background-color: #e61382;
		height: 2.2rem;
		line-height: 2.2rem;

		.van-nav-bar__title {
			color: #fff;
			font-size: 1.1rem;
		}

		.van-nav-bar__text,
		.van-icon {
			font-size: 0.9rem;
			color: #fff;
		}
	}
}

.head-image {
	margin-top: 2.2rem;
}

.detail {
	font-size: 0px;
}

.good-name {
	background-color: #fff;
}

.good-price {
	background-color: #fff;
}

// .tab {
// 	::v-deep .van-tabs__wrap {
// 		position: sticky;
// 		top: 2.2rem;
// 	}
// }

.bottom {
	position: fixed;
	bottom: 0px;
	left: 0px;
	background-color: #fff;
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-flow: nowrap;

	div {
		flex: 1;
		text-align: center;

		.van-button {
			width: 92%;
		}
	}
}
</style>
